<template>
  <view>
    <Lampgoods>
      <view class="miaosha">
        <view class="left">
          <view class="letop">
            <view class="jianq">
              秒杀价
            </view>
            <view class="shengyu">
             已售{{goods_Detail.goods_Detailst.sold_count}}件剩余{{goods_Detail.goods_Detailst.all_count-goods_Detail.goods_Detailst.sold_count}}件
            </view>
          </view>
          <view class="prites">
            <view class="price">
              ￥{{goods_Detail.goods_Detailst.unit_price}}
            </view>
            <view class="delt_price">
              原价 ￥{{goods_Detail.goods_Detailst.discount_price}}
            </view>
          </view>
        </view>
        <view class="right">
          <view class="rigtop">
            距离秒杀开始仅剩
          </view>
          <view class="rigbut">
            <u-count-down :timestamp="miaoshagoods.startimestamp" @change="onChange">
              <view class="time">
                <view class="time">
                  <view class="time__custom">
                    <text class="time__custom__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days}}</text>
                  </view>
                  <text class="time__doc" style="margin-top: 8rpx;">天</text>
                  <view class="time__custom">
                    <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
                  </view>
                  <text class="time__doc">:</text>
                  <view class="time__custom">
                    <text
                      class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</text>
                  </view>
                  <text class="time__doc">:</text>
                  <view class="time__custom">
                    <text class="time__custom__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
                  </view>
                </view>
              </view>
            </u-count-down>
          </view>
        </view>
      </view>
   <view slot="goumaibut"  class="rightt">
     <view class="buy btn u-line-1">秒杀即将开始</view>
   </view>
    </Lampgoods>
  </view>

</template>

<script setup>
  import Lampgoods from "/src/components/Lampgoods/Lampgoods.vue"
  import {
    ref
  } from 'vue'
  import {
    goodsStore
  } from "../../store/goods.js"
  const goodStore = goodsStore()

  const {
    goods_Detail,
    miaoshagoods
  } = goodStore
  //获取秒杀数据
  goodStore.getmiaoshagoods()
  const timeData = ref({})

  function onChange(e) {
    if(e.days===0 & e.hours===0 & e.minutes===0 &  e.seconds===0 ){
      if(miaoshagoods.status!=='padding')
      goodStore.getmiaoshagoods()
    }
    timeData.value = e
  }
</script>

<style scoped lang="scss">
  .miaosha {
    margin: 40rpx 0;
    background-color: #ffaa00;
    height: 140rpx;
    display: flex;
    justify-content: space-between;

    .left {
      margin-top: 20rpx;
      margin-left: 20rpx;
      height: 40rpx;
      line-height: 40rpx;

      .letop {
        display: flex;

        // justify-content: space-between;
        .jianq {
          color: #fff;
          font-size: 30rpx;
        }

        .shengyu {
          margin-left: 20rpx;
          color: #fff;
          font-size: 20rpx;
          background-color: #d89000;
          padding: 0 15rpx;
          border-radius: 10rpx;
        }
      }

      .prites {
        display: flex;
        justify-content: space-between;

        .price {
          margin-top: 20rpx;
          padding-left: 30rpx;
          color: #fff;
          font-size: 35rpx;
        }

        .delt_price {
          text-decoration: line-through;
          margin-top: 20rpx;
          font-size: 20rpx;
          color: #fff;

        }
      }
    }

    .right {
      margin-right: 10rpx;

      .rigtop {
        margin-top: 40rpx;
        font-size: 25rpx;
        color: #fff;
      }

      .rigbut {
        .time {

          display: flex;
          align-items: center;

          &__custom {
            margin-top: 4px;
            width: 20px;
            height: 20px;
            background-color: #ef9f00;
            border-radius: 4px;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            justify-content: center;
            align-items: center;

            &__item {
              color: #fff;
              font-size: 12px;
              text-align: center;
            }
          }

          &__doc {
            color: #fff;
            padding: 2rpx 8rpx;
            font-size: 25rpx
          }


        }

      }
    }
  }
.rightt {
        // border: 1px solid red;
        margin-left: 270rpx;
        font-size: 28rpx;
        align-items: center;
        .btn {
          text-align: center;
          line-height: 80rpx;
          width: 250rpx;

          color: #ffffff;
        }
        .buy {
      background-color: #ffaa00;
      border-radius: 40rpx;
        }
      }
</style>